<template>
  <div style="padding: 24px">
    <a-spin :spinning="loading" tip="AI正在生成题目，请稍后...">
      <a-card v-for="(question, index) in questions" :key="index" style="margin-bottom: 16px">
        <template #title>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>题目 {{ index + 1 }}</span>
                    <a-button 
                        type="text" 
                        size="small" 
                        @click="handleCollect(question)"
                    >
                    </a-button>
                    <span @click="handleCollect(question)" style="cursor: pointer;">
          <StarFilled v-if="question.collected" style="color: #fadb14;" />
          <StarOutlined v-else />
        </span>
    </div>
    </template>
        <div class="question-title">{{ question.contentChoice.title }}</div>
        <a-radio-group v-model:value="question.userAnswer" :disabled="submitted">
            <a-radio
                v-for="(option, idx) in question.contentChoice.options"
                :key="idx"
                :value="String.fromCharCode(65 + idx)"
                style="display: block; margin: 8px 0"
            >
            {{ option }}
            </a-radio>
        </a-radio-group>
        <div v-if="submitted" style="margin-top: 8px;">
  <a-tag :color="question.userAnswer === question.answer ? 'green' : 'red'">
    {{ question.userAnswer === question.answer ? '正确' : '错误' }}
  </a-tag>
  <span style="margin-left: 8px;">正确答案：{{ question.answer }}</span>
</div>
<!-- 解析内容 -->
  <div v-if="submitted && question.analysis" style="margin-top: 8px; color: #555;">
    <strong>解析：</strong>
    <div style="margin-top: 4px;">{{ question.analysis }}</div>
  </div>
      </a-card>
      <a-button
  type="primary"
  @click="onClickButton"
  style="margin-bottom: 16px"
>
  {{ submitted ? '返回' : '提交' }}
</a-button>

    </a-spin>
  </div>

    <!-- 收藏夹的对话框 -->
   <CollectDialog ref="collectDialogRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAiQuestionStore } from '@/stores/useAiQuestionStore'
import { reQuestion } from '@/api/testQuestionController'
import { message } from 'ant-design-vue'
import { StarOutlined, StarFilled } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'
// 引入收藏夹对话框组件
import CollectDialog from '@/components/questionByAi/CollectDialog.vue'
const emit = defineEmits(['answer-change'])
// 引入收藏夹对话框的引用
const collectDialogRef = ref()
const router = useRouter()
const submitted = ref(false)
const aiStore = useAiQuestionStore()
const questions = ref([])
const loading = ref(false)

onMounted(async () => {
  if (aiStore.titles.length === 0) {
    message.warning('暂无题目可生成')
    return
  }

  loading.value = true
  try {
    const requireText = aiStore.titles.join('；') // 用分号拼接
    const res = await reQuestion({ require: requireText, type: 1 }, { timeout: 1000000 })
    const list = res.data?.data || []

    questions.value = list.map(q => ({
      ...q,
      contentChoice: JSON.parse(q.content),
      userAnswer: ''
    }))
  } catch (err) {
    console.error('AI生成题目失败：', err)
    message.error('AI生成题目失败')
  } finally {
    loading.value = false
  }
})

function onClickButton() {
  if (submitted.value) {
    router.back()
  } else {
    handleSubmit()
  }
}
function handleSubmit() {
    console.log('提交按钮点击')
  const incomplete = questions.value.some(q => q.userAnswer === '')
  if (incomplete) {
    message.warning('请完成所有题目后再提交')
    return
  }
  submitted.value = true
}
//收藏
function handleCollect(question) {
  question.collected = !question.collected;
  collectDialogRef.value.openDialog(question)
}

</script>

<style scoped>
.question-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
</style>
